<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
  body {
  margin: 0;
}

.dialog {
  width: 400px;
  height: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.46);
  border: 1px solid #ccc;
  position: fixed;
  left: 30px;
  top: 30px;
}

.dialog-title {
  height: 40px;
  background: #f6f6f6;
  line-height: 40px;
  padding-left: 20px;
  color: #555;
  cursor: move;
  user-select: none;
}

.dialog-close {
  float: right;
  font-size: 22px;
  cursor: pointer;
  padding: 0 20px 5px;
  transition: background 0.2s;
  font-family: 'Segoe UI';
  line-height: 35px;
}

.dialog-close:hover {
  background-color: #e81123;
  color: #fff;
}
</style>
</head>
<body>
  <div class="dialog" id="box">
    <div class="dialog-title" id="drop">
      <span>注册信息（可以拖曳）</span>
      <div class="dialog-close" id="close">×</div>
    </div>
    <div class="dialog-body"></div>
  </div>
  <script>
    var box = document.getElementById('box');
    var drop = document.getElementById('drop');
    // 鼠标按下时开启鼠标拖曳效果
    drop.onmousedown = function (e) {
      // 计算鼠标指针在div元素内的位置
      var spaceX = e.pageX - box.offsetLeft;
      var spaceY = e.pageY - box.offsetTop;
      // 让div元素跟随鼠标指针移动
      document.onmousemove = function (e) { 
        // 设置div元素移动后的位置
        box.style.left = e.pageX - spaceX + 'px';
        box.style.top = e.pageY - spaceY + 'px';
      };
    };
    // 鼠标释放时取消鼠标拖曳效果
    document.onmouseup = function () {
      document.onmousemove = null;
    };
    // 单击右上角的关闭按钮可关闭对话框
    document.getElementById('close').onclick = function () {
      box.style.display = 'none'; 
    };
  </script>
</body>
</html>